<template>
  <div class="container">
    <div class="header pos-rel" v-if="detail.contentType === 2">
      <video id="myVideo" :src="detail.videoUrl">
        <cover-view class="height-208" v-if="videoNoShow">
          <cover-image :src="detail.coverUrl" class="cover-img" mode="widthFix" />
          <cover-view class="cover-play flex flex-center">
            <cover-image :src="fileSpace + '/images/content-play-layer.png'" class="width-45 height-45" mode="widthFix" @click="playVideo" />
          </cover-view>
        </cover-view>
      </video>
    </div>
    <div class="main pad-l-15 pad-r-15 pad-t-9">
      <div class="title font-22 font-w">{{detail.contentName}}</div>
      <div class="info flex flex-between font-12 mar-t-11">
        <div class="v-align-c">
          <img class="author-headshop" v-if="detail.avatar" :src="detail.avatar" alt="">
          <span class="font-15 mar-l-8">{{detail.nickname}}</span>
          <span class="mar-l-15">{{detail.createTime}}</span>
        </div>
        <div class="font-color-9" v-if="detail.contentType === 2">播放：{{ detail.accessCount }}次</div>
      </div>
      <div class="content mar-t-15">
        <text space="nbsp" v-html="detail.content"></text>
        <div class="font-15 font-color-9 mar-t-20" v-if="detail.contentType === 1">阅读：{{ detail.accessCount }}</div>
      </div>
    </div>
    <div class="footer flex flex-center">
      <button open-type="share" class="share-btn"></button>
      <img class="width-28 height-23" v-if="fileSpace" :src="fileSpace + '/images/share-content.png'" alt="">
      <span class="font-16 font-w mar-l-10">分享给朋友</span>
    </div>
  </div>
</template>
<script>
import { getContentDetail, updateAccessCount } from '@/api/home'
export default {
  data() {
    return {
      videoNoShow: true,
      contentInfoId: '',
      detail: {}
    }
  },
  onLoad(options) {
    // 初始化data
    Object.assign(this.$data, this.$options.data())
  },
  onShow() {
    this.contentInfoId = this.getCurrentPage().query.contentInfoId
    this.$pt.setNavigationBarTitle({
      title: this.$pt.getStorageSync('appInfo').appName
    })
    this.init()
  },
  onShareAppMessage() {
    this.$pt.setStorageSync('chooseLocation', true)
    return {
      title: this.detail.shareName,
      imageUrl: this.detail.sharePosterUrl,
      path: `pages/home/content-center/content-detail/main?contentInfoId=${this.contentInfoId}`
    }
  },
  methods: {
    init() {
      getContentDetail({ contentInfoId: this.contentInfoId }).then(response => {
        if (response.isError) return
        if (response.data.status !== 1) {
          this.$pt.showModal({
            title: '提示',
            content: '该内容已失效!',
            showCancel: false,
            success: (res) => {
              if (res.confirm) {
                const pages = getCurrentPages() // eslint-disable-line
                let prevPage = pages[pages.length - 2]
                prevPage.setData({ contentInfoId: this.contentInfoId })
                this.$pt.navigateBack({ delta: 1 })
              }
            }
          })
        }
        const strLength = response.data.createTime.length
        response.data.createTime = response.data.createTime.slice(0, strLength - 3)
        this.detail = response.data
        this.detail.accessCount = this.accessCountTs(this.detail.accessCount)
        if (this.detail.contentType === 1) {
          // 若果是图文类型，直接更新阅读量
          this.updateAccessCount()
        }
      }).catch(() => {
      })
    },
    playVideo() {
      // 播放视频
      this.videoNoShow = false
      let videoContent = this.$pt.createVideoContext('myVideo')
      videoContent.play()
      videoContent.requestFullScreen()
      // 播放视频的时候，更新播放量
      this.updateAccessCount()
    },
    updateAccessCount() {
      // 更新阅读量/播放量
      updateAccessCount({ contentInfoId: this.contentInfoId }).then(response => {
        if (response.isError) return false
      }).catch(() => {
      })
    },
    accessCountTs(count) {
      if (count >= 10000) {
        return (count / 10000) + '万'
      } else {
        return count
      }
    }
  }
}
</script>
<style lang="less" scoped>
.container{
  background-color: white;
  min-height: 100vh;
  .header{
    width: 100%;
    height: 208px;
    left: 0;
    top: 0;
    z-index: 5;
    overflow: hidden;
  }
  .cover-img{
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 4;
    height: unset;
  }
  #myVideo{
    width: 100%;
    height: 208px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 4;
    .cover-play{
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 208px;
      z-index: 5;
      background-color: rgba(0, 0, 0, .5);
    }
  }
  .author-headshop{
    width: 24px;
    height: 24px;
    border-radius: 50%;
  }
  .content{
    padding-bottom: 69px;
  }
  .footer{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 54px;
    background-color: white;
    box-shadow: 0 -0.5px 12px rgba(131, 131, 131, 0.25);
    .share-btn {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      background: none;
    }
  }
}
</style>
